/* General y variables */

* {
  margin: 3px;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

:root{
  --Gray:#394867;
  --DarkGray:#14274E;
  --Blue:#9BA4B4;
  --White:#F1F6F9;
}

/* Body */

body {
  background-color: var(--Gray);
 }

/* Header */

header {
  background-color: var(--DarkGray);
  border-radius: 25px;
  display: flex; 
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
 }
 .Titulo {
  color: var(--Blue);
 }

 header button {
  border: none ;
  background: none;
  margin: 0 10px;
  color: var(--White);
 }

 header a {
  text-decoration: none;
  border: none ;
  background: none;
  margin: 0 10px;
  color: var(--White);
 }

 header h1 {
  color: var(--Blue);
 }	

 header a:hover {
  border-radius: 3px;
  cursor: pointer;
  border-radius: 10px;
 }
 
 header a:hover {
  border-radius: 3px;
  cursor: pointer;
  border-radius: 10px;
  color: var(--Blue);
 }

/* General seccion*/

.TextoSeccion {
text-align: center;
margin-bottom: 5px;
margin-left: 5px;
color: var(--Blue);
}

.TextoSeccion-center {
text-align: center;
color: var(--Blue);
}


/* Seccion Principal */

.section-1 {
margin-bottom: 5px;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
background-color: var(--DarkGray);
border-radius: 25px;
padding: 10px;
text-align: justify;
}

.section-1 h2 {
text-align: center;
color: var(--Blue);
margin-top: 0;
}

.section-1 p {
color: var(--White);
margin-top: 10px;
}

.section-1 .text-small {
color: var(--White);
margin-top: 10px;
}

.section-1 button {
align-self: flex-end;
margin-left: 90%;
border: none ;
background: none;
color: var(--White)
}

.section-1 button:hover {
border-radius: 3px;
cursor: pointer;
border-radius: 10px;
color: var(--Blue);
}

.section-1 > img {
margin-top: 5%;
align-self: center;
display: flex;
flex-direction: row;
max-width: 100%;
max-height: 100%;
display: block;
margin: 0 auto;
border-radius: 25px;
object-fit: contain;
}

/* sECCION SLIDER */


.section-sliders {
margin-bottom: 5px;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
background-color: var(--DarkGray);
border-radius: 25px;
padding: 10px;
text-align: justify;
align-items: center;
align-content: center;
}



.section-sliders h2 {
text-align: center;
color: var(--Blue);
margin-top: 0;
}

.section-sliders p {
color: var(--Blue);
margin-top: 10px;
}

.section-sliders .text-small {
color: var(--Blue);
margin-top: 10px;
}

.section-sliders button {
align-self: flex-end;
margin-left: 90%;
border: none ;
background: none;
color: var(--Blue)
}

.section-sliders button:hover {
border-radius: 3px;
cursor: pointer;
border-radius: 10px;
color: var(--Blue);
}

.section-sliders > img {
margin-top: 5%;
align-self: center;
display: flex;
flex-direction: row;
max-width: 100%;
max-height: 100%;
display: block;
margin: 0 auto;
border-radius: 25px;
object-fit: contain;
}

.section-sliders h4{
text-align: center;
color: var(--White);
}

#SliderHabilidad {
-webkit-appearance: none;
appearance: none;
width: 70%;
background: var(--Gray);
border-radius: 10px;
outline: none; 
align-self: center;
}

#SliderHabilidad::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px; 
background: var(--Blue); 
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}

.slider-container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}

.slider-container span{
color: var(--White);
}

.min-value, .max-value {
position: absolute;
top: 50%; 
transform: translateY(-50%);
font-size: 14px;
}

.min-value {
left: 10px;
}

.max-value {
right: 10px; 
}


/* Seccion 2 */

.section-2 {
margin-bottom: 5px;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
background-color: var(--DarkGray);
border-radius: 25px;
padding: 10px;
text-align: justify;
}

.section-2 h2 {
color: var(--Blue);
margin-top: 0;
}

.section-2 p {
color: var(--White);
margin-top: 10px;
}

.section-2 .text-small {
color: var(--White);
margin-top: 10px;
}

.section-2 span {
font-size: 20px;
color: var(--Blue);
}

.section-2-left {
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 5px;
box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
background-color: var(--DarkGray);
border-radius: 25px;
padding: 10px;
text-align: right justify;
}


.section-2-left h2 {
color: var(--Blue);
margin-top: 0;
}

.section-2-left p {
color: var(--White);
margin-top: 10px;
}

.section-2-left .text-small {
color: var(--Blue);
margin-top: 10px;
}

/* Seccion de galeria */
.section-galeria {
display: flex; 
justify-content: space-around;
object-fit: contain;
}

.section-galeria > a {
background-color: var(--DarkGray);
margin-bottom: 2px;
margin-right: 2px;
margin-left: 2px;
text-decoration: none;
box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
border-radius: 25px;
padding: 10px;
width: 40%;
}

.section-galeria a > div > h4 {
text-align: center;
color: var(--Blue);
margin-top: 10px;
}

.section-galeria a > div > img {
margin-top: 5%;
align-self: center;
display: flex;
max-width: 90%;
max-height: 90%;
display: block;
margin: 0 auto;
border-radius: 25px;
object-fit: contain;
}



/* IFRAME */

iframe {
border-radius: 25px;
display: block;
margin: 0 auto;
width: 75%;
height: 75%;
}

.section-1 iframe {
width: 750%;
height: 400px;
}

/* Seccion Nosotros */

.section-nos {
justify-content: space-between;
}	

.section-nos > div {
box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
background-color: var(--DarkGray);
border-radius: 25px;
padding-top: 0.1px;
padding-bottom: 0.1px;
padding-left: 4px;
padding-right: 4px;
}

.section-nos a {
text-decoration: none;
border: none ;
background: none;
margin: 0 10px;
color: var(--White);
}

.section-nos h3 {
color: var(--Blue);
margin-top: 0;
}

.section-nos h3> span {
color: var(--Blue);
align-self: right;
}

.section-nos p {
color: var(--White);
margin-top: 10px;
}

.section-nos button {
align-self: flex-end;
margin-left: 90%;
border: none ;
background: none;
color: var(--White)
}

.section-nos button:hover {
border-radius: 3px;
cursor: pointer;
border-radius: 10px;
color: var(--Blue);
}


 /* Footer */

 footer {
  background-color: var(--DarkGray);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
  border-radius: 25px;
 }

 footer p {
  align-self: center;
  color: var(--White);
  margin-top: 0;
 }

 /* Seccion Ruti */

 
 .section-ruti {
  margin-bottom: 5px;
  margin-top: 5px;
  margin-left: 5px;
  margin-right: 5px;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
  background-color: var(--DarkGray);
  border-radius: 25px;
  padding: 10px;
  text-align: justify;
  align-items: center;
  align-content: center;
 }


 
 .section-ruti h2 {
  text-align: center;
  color: var(--Gray);
  margin-top: 0;
 }

 .section-ruti p {
  color: var(--Gray);
  margin-top: 10px;
 }
 
 .section-ruti .text-small {
  color: var(--White);
  margin-top: 10px;
 }
 
 .section-ruti button {
  align-self: flex-end;
  margin-left: 90%;
  border: none ;
  background: none;
  color: var(--Gray)
 }

 .section-ruti button:hover {
  border-radius: 3px;
  cursor: pointer;
  border-radius: 10px;
  color: var(--Gray);
 }

 .section-ruti > img {
  margin-top: 5%;
  align-self: center;
  display: flex;
  flex-direction: row;
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: 0 auto;
  border-radius: 25px;
  object-fit: contain;
 }

 .section-ruti-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.section-ruti {
  flex: 0 0 100%; /* take full width */
  scroll-snap-align: start;
}

.section-ruti-container::-webkit-scrollbar {
  display: none;
}

h5,h6 {
  color: var(--Blue);
}